<template>
  <div class="block_main" v-loading="loading">
    <!-- <h4>累计50项</h4> -->
    <ul>
      <li v-for="(item,index) in tableData" @click="listTo(item.question_num,item.id,item.is_read)" :key='item.index'>
        <span class="indextype" style="width:30px;">{{index+1}}</span>
        <span class="tag" style="width:40px;">
          <em style="color:#ffab51;" v-if='item.type == 0'>移交</em><em v-else-if='item.type == 1' class="green">申诉</em><em v-else-if='item.type == 2' class="grey">追问</em><em v-else-if='item.type == 3' class="red">督办</em><em v-else-if='item.type == 5' class="red">退回</em>
        </span>
        <span class="tit" style="width:60%;">
          <el-badge is-dot class="item" v-if='item.is_read == 0'>{{item.content}}</el-badge>
          <el-badge class="item" v-else>{{item.content}}</el-badge>
        </span>
        <span style="width:140px;">{{item.addtime}}</span>
        <!-- <span><em style="color:#ffab51;" v-if='item.is_read == 0'>未读</em><em v-else-if='item.is_read == 1' class="green">已读</em></span> -->

      </li>
    </ul>
    <!-- 翻页 -->
    <div class="zpage" v-if="tableData.length>0">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
        :page-size.sync="pagesize" layout="total, prev, pager, next, jumper" :total.sync="pagetotal">
      </el-pagination>
    </div>
    <!-- 翻页 end -->
  </div>
</template>
<script>
  import actionurl from '@/assets/js/actionurl'
  export default {
    name: 'infoCard',
    data() {
      return {
        loading:true,
        tableData: [],
        currentPage: 1,
        pagesize: 4,
        pagetotal: 10000,
 
      }
    },
    methods: {
      listTo(row, id, is_read) {//消息点击事件
        var _this = this;
        if (is_read == 1) {//如果市已读，直接跳页面
          _this.$router.push({
            path: '/supervise/' + row+'/2'
          });
        } else {
          actionurl.AnswerWatch({
            id: id
          }, function (re) {
            if (re.status == 1) {
              _this.$router.push({
                path: '/supervise/' + row+'/2'
              });
            } else {
              _this.$message(re.msg);
            }

          });
        }


      },
      MessageList() {
        var _this = this;
        actionurl.getMessage({
          pageNum: _this.pagesize,
          pageOn: _this.currentPage

        }, function (re) {
          _this.loading = false;
          if (re.status == 1) {
            _this.tableData = re.data;
            re.count > 18 ? _this.pagetotal = 21: _this.pagetotal = re.count;
            // _this.pagetotal = re.count;
          } else {
            _this.$message(re.msg);
          }

        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.MessageList();
      },

    },
    mounted() {

    },
    created() {
      this.MessageList();
    },
  }

</script>
<style scoped lang="scss">
  .block_main {
    ul {
      li {
        display: flex;
        cursor: pointer;
        justify-content: space-around;
        font-size: 14px;
        line-height: 30px;
        transition: all 0.3s;
    
        &:hover {
          background: #c9e1f4;
        }

        &:nth-child(odd) {
          background: #f9f9f9;

          &:hover {
            background: #c9e1f4;
          }
        }

        span {
          display: inline-block;
          padding:5px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:nth-child(1){
            text-align: center;
          }
        }

        .tit {
          width: 300px;
          display: block;
        }
      }
    }
  }

  h4 {
    font-weight: normal;
    font-size: 16px;
    padding-left: 20px;
  }

</style>
